<template>
  <div class="matter">
    <div class="left" ref="leftList">
      <ul>
        <li
          v-for="(item, index) in cateList"
          :key="item.id"
          :class="{ active: current === index }"
          @click="changeIndex(index)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="right" ref="rightList">
      <div class="content">
        <div
          class="bigList"
          v-for="item in this.cateList"
          :key="item.id"
          ref="goods"
        >
          <div class="title">{{ item.name }}</div>
          <ul>
            <li v-for="goods in item.children" :key="goods.id">
              <div class="img">
                <img :src="goods.thumb_img" alt="" />
              </div>
              <div class="text">
                <span class="ellipsis-1">{{ goods.name }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqCategoryApi } from "../../../services/index";
import BScroll from "@better-scroll/core";
export default {
  name: "matter",
  data() {
    return {
      current: 0,
      cateList: [],
      hightList: [0],
      flag: false,
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      const res = await reqCategoryApi();
      // console.log(res);
      if (res.code === 200) {
        this.cateList = res.data;
        this.$nextTick(() => {
          this.leftBS = new BScroll(this.$refs.leftList, {});
          this.rightBS = new BScroll(this.$refs.rightList, {
            probeType: 3,
            click: true,
            bounce: false,
          });
          // 右侧滑动，左侧切换
          //1,计算动态高度
          this.$refs.goods.forEach((dom) => {
            // console.log(dom.offsetHeight);
            const { hightList } = this;
            hightList.push(hightList[hightList.length - 1] + dom.offsetHeight);
          });
          // console.log(this.hightList);
          let curIndex = 0;
          //2,动态监听右侧滑动的距离
          this.rightBS.on("scroll", ({ y }) => {
            const ScrollY = Math.abs(Math.round(y));
            for (let i = 0; i < this.hightList.length; i++) {
              let start = this.hightList[i];
              let end = this.hightList[i + 1];
              if (ScrollY > start && ScrollY < end) {
                curIndex = i;
                break;
              }
            }
          });
          //3,修复BUG-点击了左侧最后一个成员，位置不够到顶部，点击之后右侧滑动结束后下面的代码会执行，影响当前的状态，反向跳回
          this.rightBS.on("scrollEnd", (pos) => {
            if (this.flag) {
              this.flag = false;
              return;
            }
            this.current = curIndex;
          });
        });
      }
      // console.log(this.cateList);
    },
    changeIndex(index) {
      this.flag = true;
      this.current = index;
      this.rightBS.scrollToElement(this.$refs.goods[index], 500);
    },
  },
};
</script>

<style lang="less" scoped>
.matter {
  box-sizing: border-box;
  height: calc(100vh - 190px);
  background-color: #08dbdb;
  display: flex;

  .left {
    width: 234px;
    height: 100%;
    background-color: #fafafa;
    overflow: hidden;
    li {
      width: 224px;
      line-height: 90px;
      font-size: 32px;
      text-align: center;
      border-left: transparent solid 10px;
      &.active {
        border-left: #08dbdb solid 10px;
        background-color: #fff;
        color: #08dbdb;
      }
    }
  }
  .right {
    flex: 1;
    height: 100%;
    background-color: #fff;
    padding: 0 20px;
    overflow: hidden;
    .bigList {
      .title {
        font-size: 26px;
        line-height: 26px;
        font-weight: 700;
        margin-top: 7px;
        margin-bottom: 17px;
      }
      .title:nth-child(1) {
        padding-top: 15px;
        font-size: 26px;
        color: #333;
        letter-spacing: 1px;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
          width: 228px;
          height: 238px;
          border: 1px solid #08dbdb;
          border-radius: 5px;
          margin-bottom: 18px;
          .img {
            width: 100%;
            height: 188px;
            // border: 1px solid #823333;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .text {
            width: 100%;
            height: 50px;
            background-color: #08dbdb;
            text-align: center;
            span {
              font-size: 24px;
              line-height: 50px;
              text-align: center;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
